<template>
  <div class="table_list_fix">
    <!-- 扩展性内容 -->
    <slot name="content_context" />
    <!-- table表格 -->
    <pl-table
      class="basic-table"
      ref="plTable"
      use-virtual
      stripe
      v-loading="loading"
      :border="border"
      size="mini"
      :data="dataSource"
      :height="tableHeight"
      :max-height="tableMaxHeight"
      :row-height="rowHeight"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      @selection-change="selectionChange"
      v-on="tableEvents"
      @sort-change="handleSortChange"
      :show-summary="showSummary"
      :summary-method="summaryMethod"
      :thtd-beyond-hiding="headerBeyondHide"
    >
      <pl-table-column v-if="showSelectCol" fixed type="selection" width="55" />
      <!-- 表格数据 -->
      <template v-for="(column, key) in columns">
        <pl-table-column
          v-if="!column.children"
          :key="key"
          :prop="column.prop"
          :property="column.prop"
          :label="column.label"
          :align="column.align"
          :fixed="column.fixed"
          :min-width="column.width || defaultWidth"
          :formatter="column.formatter"
          :show-overflow-tooltip="true"
          :sortable="column.sortable"
        >
          <template v-if="column.required" slot="header">
            <span style="color: #ed4014">*</span><span>{{ column.label }}</span>
          </template>
          <template v-if="column.render" v-slot="scope">
            <table-column
              :index="scope.$index"
              :row="scope.row"
              :col="scope.column"
              :render="column.render"
            />
          </template>
          <template v-else-if="column.type === 'input'" v-slot="scope">
            <el-input
              size="mini"
              v-model.trim="scope.row[scope.column.property]"
              :maxlength="column.maxlength || ''"
              :show-word-limit="column.maxlength ? true : false"
              :placeholder="column.placeholder"
            />
          </template>
          <template v-else-if="column.type === 'inputNum'" v-slot="scope">
            <InputNumber
              v-model="scope.row[scope.column.property]"
              size="mini"
              :controls="column.controls || false"
              :min="column.minVal || 0"
              :max="column.maxVal || 99999999"
              :precision="column.precision"
            />
          </template>
          <template v-else-if="column.type === 'inputNumChange'" v-slot="scope">
            <InputNumber
              v-model="scope.row[scope.column.property]"
              size="mini"
              :controls="column.controls || false"
              :min="column.minVal || 0"
              :max="column.maxVal || 99999999"
              :precision="column.precision"
              @change="((val)=>{ handleRowChange({ row: scope.row, val, prop: scope.column.property, index: scope.$index }) })"
            />
          </template>
          <!-- 日期时间选择 -->
          <template v-else-if="column.type === 'dateTime'" v-slot="scope">
            <el-date-picker
              v-model="scope.row[scope.column.property]"
              type="datetime"
              size="mini"
              value-format="yyyy-MM-dd HH:mm:ss"
              :clearable="column.clearable"
              :pickerOptions="column.pickerOptions"
            />
          </template>
        </pl-table-column>
        <pl-table-column
          v-else
          :key="column.label"
          :label="column.label"
          :show-overflow-tooltip="true"
        >
          <pl-table-column
            v-for="child in column.children"
            :key="child.prop"
            :prop="child.prop"
            :property="child.prop"
            :label="child.label"
            :align="child.align"
            :min-width="child.width || defaultWidth"
            :formatter="child.formatter"
            :show-overflow-tooltip="true"
          >
            <template v-if="child.render" v-slot="scope">
              <table-column
                :index="scope.$index"
                :row="scope.row"
                :col="scope.column"
                :render="child.render"
              />
            </template>
            <template v-else-if="child.type === 'input'" v-slot="scope">
              <el-input
                size="mini"
                v-model.trim="scope.row[scope.column.property]"
                :maxlength="child.maxlength || ''"
                :show-word-limit="child.maxlength ? true : false"
                :placeholder="child.placeholder"
              />
            </template>
            <template v-else-if="child.type === 'inputNumChange'" v-slot="scope">
              <InputNumber
                :class="{ active: !!scope.row[scope.column.property] }"
                v-model="scope.row[scope.column.property]"
                size="mini"
                :controls="child.controls || false"
                :min="child.minVal || 0"
                :max="child.maxVal || 99999999"
                :precision="child.precision"
                @change="(val)=>{ handleRowChange({ row: scope.row, val, prop: scope.column.property, index: scope.$index }) }"
              />
            </template>
          </pl-table-column>
        </pl-table-column>
      </template>
      <pl-table-column
        align="center"
        v-if="showActionCol"
        :fixed="actionColFixed"
        :min-width="actionColWidth"
        :label="actionColLabel"
      >
        <template slot-scope="scope">
          <table-column
            :index="scope.$index"
            :row="scope.row"
            :col="scope.column"
            :render="actionRender"
          />
        </template>
      </pl-table-column>
    </pl-table>
    <!-- 分页部分 -->
    <div v-if="showPagination" class="pagination-container">
      <el-pagination
        :total="total"
        :page-sizes="pageSizes"
        :current-page="pagination.pageNum"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handlePageChange"
        @size-change="handlePageSize"
      />
    </div>
  </div>
</template>

<script>
import TableColumn from './tableColumn';
import InputNumber from '@/components/inputNumber/inputNumber';

export default {
  name: 'BasicList',
  components: {
    TableColumn,
    InputNumber,
  },
  props: {
    rowHeight: {
      type: Number,
      default: 41,
    },
    dataSource: {
      type: Array,
      default () {
        return [];
      },
    },
    columns: {
      type: Array,
      default () {
        return [];
      },
    },
    actionColFixed: {
      type: [Boolean, String],
      default: 'right',
    },
    showActionCol: {
      type: Boolean,
      default: false,
    },
    tableHeight: {
      type: Number,
      default: null,
    },
    tableMaxHeight: {
      type: Number,
      default: null,
    },
    actionColWidth: {
      type: Number,
      default: 100,
    },
    actionColLabel: {
      type: String,
      default: '操作',
    },
    actionRender: {
      type: Function,
      default: () => {},
    },
    showSelectCol: {
      type: Boolean,
      default: true,
    },
    border: {
      type: Boolean,
      default: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    showPagination: {
      type: Boolean,
      default: true,
    },
    pageSizes: {
      type: Array,
      default () {
        return [50, 100, 500, 1000];
      }
    },
    pagination: {
      type: Object,
      default () {
        return {};
      },
    },
    total: {
      type: Number,
      default: 0,
    },
    defaultWidth: {
      type: Number,
      default: 100,
    },
    tableEvents: {
      type: Object,
      default () {
        return {};
      },
    },
    selectionChange: {
      type: Function,
      default: () => {},
    },
    showSummary: {
      type: Boolean,
      default: false,
    },
    summaryMethod: {
      type: Function,
      default: () => {},
    },
    // 表头超出长度是否隐藏
    headerBeyondHide: {
      type: Boolean,
      default: true
    },
  },
  data () {
    return {
      multipleSelection: [],
    };
  },
  mounted () {
    this.$nextTick(() => {
      this.$emit('toggleRowSelection', this.$refs.plTable);
    });
  },
  methods: {
    // 排序
    handleSortChange ({ prop, order }) {
      this.$emit('customSortChange', { prop, order })
    },
    handlePageChange (current) {
      this.$emit('pageChange', current);
    },
    handlePageSize (length) {
      this.$emit('pageSizeSelect', length);
    },
    handleRowChange (data) {
      this.$emit('handleRowChange', data)
    },
  },
};
</script>

<style lang="less" scoped>
.basic-table {
  margin-top: 6px;
}
/deep/ .el-table thead.is-group th {
  background: #fff;
}
/deep/ .plTableBox .el-table__footer-wrapper tbody td {
  background: #fff;
}
.operate-group {
  .operate-btn {
    margin-left: 5px;
  }
}
.pagination-container {
    text-align: right;
    padding-right: 20px;
    margin: 10px 0;
}
/deep/.el-input-number {
  width: 100px;
}
/deep/.el-date-editor {
  width: 175px;
}
.active {
  border: 1px dashed red;
  border-radius: 4px;
  /deep/ input {
    border: none;
  }
}
</style>
